<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="outer">

    </div>

    <script>
        let outer = document.getElementById("outer");
        document.onmousemove=function(event){

            //为了处理一下浏览器兼容 - 固定语法
            let e = event || window.event;

            //获取鼠标的坐标
            //距离body的坐标
            let cx = e.clientX;
            let cy = e.clientY;

            let sx = e.screenX;
            let sy = e.screenY;
            
            outer.innerHTML=cx+"px"+":"+cy+"px"+":"+sx+"px"+":"+sy+"px"
        }
    </script>

</body>
</html>